<template>
    <div class="banner">
        <h3>品质套餐</h3>
        <p>搭配齐全吃得好</p>
        <a>立即抢购 &gt;</a>
    </div>

  <!-- 超级会员部分 -->
    <div class="supermember">
        <div class="left">
            <img src="../assets/img/super_member.png">
            <h3>超级会员</h3>
            <p>&#8226; 每月享超值权益</p>
        </div>
        <div class="right">
            立即开通 &gt;
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped>
.banner{
    width: 95%;
    /*margin: 0 auto;*/
    height: 29vw;
    margin-left: 2.5vw;
    /*此三个样式组合，可以保证背景图片充满整个容器*/
    background-image: url(../assets/img/index_banner.png);  /*一定要用相对路径，不然上传当网站上回出错*/
    background-repeat: no-repeat;                   /*不要重复*/
    background-size: cover;

    box-sizing: border-box;
    padding: 2vw 6vw;
}
.banner h3{
    font-size: 4.2vw;
    margin-bottom: 1.2vw;
    text-align: left;
}
.banner p{
    font-size: 3.4vw;
    color: #666;
    margin-bottom: 2.4vw;
    text-align: left;
}
.banner a{
    font-size: 3vw;
    color: #C79060;
    font-weight: 700;
    float: left;
}
/****************** 超级会员部分 ******************/
.supermember{
    /*这里也设置容器宽度95%，不能用padding，因为背景色也会充满padding*/
    width: 95%;
    margin: 0 auto;
    height: 11.5vw;
    background-color: #FEEDC1;
    margin-top: 1.3vw;
    border-radius: 2px;
    color: #644F1B;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.supermember .left{
    display: flex;
    align-items: center;
    margin-left: 4vw;
    user-select: none;
}
.supermember .left img{
    width: 6vw;
    height: 6vw;
    margin-right: 2vw;
}
.supermember .left h3{
    font-size: 4vw;
    margin-right: 2vw;
}
.supermember .left p{
    font-size: 3vw;
}
.supermember .right{
    font-size: 3vw;
    margin-right: 4vw;
    cursor: pointer;
}
</style>